<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字识别</title>
    <link rel="icon" href="/static/ico/favicon.ico"/>
    <link  rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css" />
    <link  rel="stylesheet" type="text/css" href="/static/css/common.css" />

    <style>
        .showView{
            background-color: #ffffff;
            width: 800px;
            height:250px;
            margin: 50px auto 20px auto;
            border: 1px dashed #b8b8b8;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            overflow: hidden;
        }
        .showView h3{
            font-size: 20px;
            color: #999;
            letter-spacing: 2px;
        }
        .showView img{
            width: 100%;
        }
        .showLog{
            width: 800px;
            height:50px;
            margin: 0 auto;
            background-color: #1fb7ff;
            text-align: center;
            cursor: pointer;
        }
        .showLog p{
            line-height: 50px;
            color: #494949;
        }
        .result_text{
            width: 800px;
            margin: 50px auto 50px auto;
            text-align: center;
        }
        .result_text p{
            line-height: 20px;
            margin-top: 10px;
            font-size: 18px;
        }
        .big_img{
            position: fixed;
            top:0px;
            left:0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 960px;
            display: flex;
            align-items: center;
            justify-content: center;
            height:90vh;
            overflow: scroll;
            border: 5px solid #ffffff;
            z-index: 999;
            background-color: #ffffff;
        }
        .big_img img{
            width: 100%;
        }
    </style>
</head>
<body>
<header>

</header>

<section class="layui-container">
   <div id="app">
       <div class="showView" id="preview" @mouseenter="mouseover" >
           <h3 v-if="!imgShow">图片预览</h3>
           <img v-else :src="imgUrl">
       </div>
       <div class="big_img" v-show="bigImg" @mouseleave="mouseLeave">
           <img :src="imgUrl">
       </div>
       <div class="showLog" id="img_btn" @click="clear">
           <span v-html="logText"></span>
       </div>
       <div class="result_text" id="result">
           <p v-for="item in resultText">
               {{item.words}}
           </p>
       </div>
   </div>
</section>


<script src="/static/plugins/layui/layui.js" charset="utf-8"></script>
<script>
    layui.config({
        base: '/static/plugins/modules/'
    }).extend({
        Vue: 'vue/vue'
    }).use(['Vue','upload'], function() {
        var $ = layui.jquery,
            upload = layui.upload,
            Vue = layui.Vue;

        var vm = new Vue({
            el: '#app',
            data: {
                imgShow:false,
                bigImg:false,
                imgUrl:"",
                logText:"<p>支持粘贴上传和点击上传</p>",
                resultText:[]
            },
            methods:{
                mouseover:function(){
                    if(this.imgUrl){
                        this.bigImg = true;
                    }
                },
                mouseLeave:function(){
                    this.bigImg = false;
                },
                clear:function(){
                    this.imgUrl = "";
                    this.imgShow = false;
                    this.resultText = [];
                    this.logText = "<p>支持粘贴上传和点击上传</p>";
                }
            }
        })

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#preview'
            ,url: '/imgText/basicGeneral'
            ,before: function(obj){
                obj.preview(function(index, file, result){
                    vm.imgShow = true;
                    vm.imgUrl = result;
                    vm.logText = "<p>重新上传</p>";
                });
            }
            ,done: function(res){
                vm.resultText = res;
            }
            ,error: function(){
                vm.logText = "<p style='color:red;'>上传失败</p>";
            }
        });

        document.addEventListener('paste', function (event) {
            var items = (event.clipboardData || window.clipboardData).items;
            var file = null;
            if (items && items.length) {
                // 搜索剪切板items
                for (var i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf('image') !== -1) {
                        file = items[i].getAsFile();
                        break;
                    }
                }
            } else {
                vm.logText = "<p style='color:red;'>当前浏览器不支持</p>";
                return;
            }
            if (!file) {
                vm.logText = "<p style='color:red;'>粘贴内容非图片</p>";
                this.imgUrl = "";
                this.imgShow = false;
                this.resultText = [];
                return;
            }
            // 此时file就是我们的剪切板中的图片对象
            // 如果需要预览，可以执行下面代码
            var reader = new FileReader()
            reader.onload = function(event) {
                vm.imgShow = true;
                vm.imgUrl = event.target.result;
            }
            reader.readAsDataURL(file);
            // 如果不需要预览，上面这段可以忽略

            var formData = new FormData();
            formData.append('file', file);
            formData.append("mimeType", getMimeType(file, file.name));

            $.ajax({
                url: "/imgText/basicGeneral",
                data: formData,
                type: 'post',
                processData: false,
                contentType: false,
                dataType: 'json',
                xhrFields: {
                    withCredentials: true
                },
                success: function (data) {
                    vm.resultText = data;
                    vm.logText = "<p>重新上传</p>";
                },
                error: function (xOptions, textStatus) {
                    vm.logText = "<p>图片上传失败</p>";
                }
            });

        });

        function getMimeType(file, filename){
            var mimeType = file.type;
            var extendName = filename.substring(filename.lastIndexOf('.') + 1);
            if (mimeType != 'image/' + extendName) {
                return 'image/' + extendName;
            }
            return mimeType
        }
    })
</script>
</body>
</html>